<template>
  <div>
    <div>
      <el-row>
        <el-col :span="18" class="empty-col">
        </el-col>
        <el-col>
          <el-select v-model="editorConfig.lang" placeholder="请选择语言">
            <el-option
                v-for="item in langs"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </el-col>
      </el-row>

    </div>
    <editor

        :value="content"
        @input="handleInput"
        @init="editorInit"
        :theme="aceConfig.selectTheme"
        :lang="editorConfig.lang"
        :options="aceConfig.options"
        width="100%"
        height="300px"/>
  </div>
</template>

<script>
// 编辑器主题
const themes = [
  'xcode',
  'eclipse',
  'monokai',
  'cobalt'
]
// 编辑器语言
const langs = [
  'java',
  'c_cpp',
  'javascript',
  'golang'
]
// tabs
const tabs = [2, 4, 8]
// 字体大小
const fontSizes = [14, 15, 16, 17, 18, 19, 20, 21, 22]
// 编辑器选项
const options = {
  tabSize: 4, // tab默认大小
  showPrintMargin: false, // 去除编辑器里的竖线
  fontSize: 15, // 字体大小
  highlightActiveLine: true, // 高亮配置
  enableBasicAutocompletion: true, //启用基本自动完成
  enableSnippets: true, // 启用代码段
  enableLiveAutocompletion: true, // 启用实时自动完成
}
export default {
  name: "Acescript",
  components: {
    editor: require('vue2-ace-editor'),
  },
  props: {
    editorConfig: {
      type: Object,

    }
  },
  data() {
    return {
      content: '',
      langs: [
        'java',
        'cpp_c',
        'python'
      ],
      aceConfig: {
        langs,
        themes,
        tabs,
        fontSizes,
        options,
        selectTheme: 'xcode',
        selectLang: 'java',
        readOnly: false,
      },
    }
  },
  model: {
    prop: 'content',
    event: 'change'
  },

  methods: {
    handleLanguageChange() {
    },
    handleInput(e) {
      this.editorConfig.content=e
      console.log(e)
      this.$emit('update-content', e);
    },
    // 代码块初始化
    editorInit() {
      require('brace/ext/language_tools') // language extension prerequsite...
      require(`brace/mode/${this.aceConfig.selectLang}`) // 语言
      require(`brace/theme/${this.aceConfig.selectTheme}`) // 主题
    },
  }

}
</script>

